<template>
  <el-popover
    placement="bottom"
    width="180"
    trigger="click">
    <div style="margin: 0 0 0 25px;">
      <el-checkbox-group :min="1" v-model="localCheckedColumns" @change="handleCheckedColumnsChange">
        <el-checkbox v-for="(c,index) in this.columnOptions" :disabled="index === 0"
                     :label="c.prop" :key="index">{{ c.label }}</el-checkbox>
      </el-checkbox-group>
    </div>
    <el-button style="margin-left: 5px" slot="reference" type="primary" size="mini">选择展示列</el-button>
  </el-popover>
</template>

<script>
import { isNull } from "@/utils/service";

export default {
  /** 选择展示列 */
  name: "SelectColumn",
  props: {
    tbRefName: {
      type: String,
      required: true
    },
    tableShow: {
      type: Object,
      required: true
    },
    defaultActivateColumns: {
      type: Array,
      required: true
    },
    tableDataProvider: {
      type: Function,
      required: true
    }
  },
  mounted() {
    this.getRowInfo();
  },
  data() {
    return {
      columnOptions: [],
      localCheckedColumns: [ ...this.defaultActivateColumns ]
    };
  },
  methods: {
    handleCheckedColumnsChange(value) {
      let temp = this.tableDataProvider()
      this.$emit("toRender", { tableList: [] });

      Object.keys(this.tableShow).forEach((i) => {
        this.$nextTick(() => {
          this.tableShow[i] = value.includes(i);
        })
      });

      this.$nextTick(() => {
        this.$emit("toRender", { tableList: temp });
      });
    },
    getRowInfo(){
      this.$nextTick(() => {
        // 获取所有 el-table-column 的 prop 和 label 属性
        let tableColumns
        if (this.tbRefName === 'myTb') {
          tableColumns = this.$parent.$refs[this.tbRefName].columns;
        } else {
          tableColumns = this.$parent.$refs[this.tbRefName].getTableColumn();
        }
        this.columnOptions = tableColumns.map(column => {
          return {
            prop: column.property,
            label: column.label
          };
        }).filter(({prop, label}) => !isNull(prop) && !isNull(label));
      });
    }
  }
};
</script>

<style scoped>
</style>